import { HTMLAttributes, Key, MouseEvent, ReactNode } from 'react';
import { StickyComponentProps } from '../sticky';
import { TabsContext } from './Tabs';
import TabsPanel, { TabsPanelContext } from './TabsPanel';

export interface TabsComponentProps {
	defaultActiveKey?: string;
	activeKey?: string;
	onChange?: (key: string) => void;
	onNavItemClick?: (
		e: MouseEvent<HTMLDivElement>,
		option: { disabled: boolean; key: string; index: number },
	) => void;
	trackWidth?: number | string;
	trackHeight?: number | string;
	trackColor?: string;
	border?: boolean;
	transitionDuration?: number;
	animated?: boolean;
	ellipsis?: boolean;
	sticky?: boolean;
	stickyOffsetTop?: number | string;
	onStickyScroll?: StickyComponentProps['onScroll'];
	onStickyChange?: StickyComponentProps['onChange'];
	swipeThreshold?: number;
	indicator?: TabsIndicator;
}

export interface TabsIndicator {
	navLeft?: ReactNode;
	navRight?: ReactNode;
	navBottom?: ReactNode;
}

export type TabsProps = TabsComponentProps &
	Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;

export interface TabsRef {
	root: HTMLDivElement;
}

export interface TabsPanelComponentProps {
	title?: ReactNode;
	disabled?: boolean;
	forceRender?: boolean;
}

export type TabsPanelProps = TabsPanelComponentProps &
	Omit<HTMLAttributes<HTMLDivElement>, 'title'>;

export interface TabsPanelExportExtra {
	Context: typeof TabsPanelContext;
}

export interface TabsExportExtra {
	Panel: typeof TabsPanel;
	Context: typeof TabsContext;
}

export interface TabsContextData {
	activeKey?: Key;
	animated?: boolean;
}

export interface TabsPanelContextData {
	active?: boolean;
}
